<template>
  <layoutPage class="drafts">
    <template #search>
      <vxe-form
        class-name="custom-form"
        :data="formSearch"
        title-align="right"
        align="left"
        title-width="120"
        @submit="handleSearch"
        @reset="handleReset"
      >
        <vxe-form-item
          title="类型："
          field="type"
          span="6"
          :item-render="{}"
          title-width="80"
        >
          <template #default>
            <el-select v-model="formSearch.type" placeholder="请选择" clearable>
              <el-option
                v-for="item in _discStore.getDictType('drafts_business_type')"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </vxe-form-item>
        <vxe-form-item
          title="创建时间："
          field="createTime"
          span="6"
          :item-render="{}"
          title-width="80"
        >
          <template #default>
            <el-date-picker
              v-model="formSearch.createTime"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </template>
        </vxe-form-item>
        <vxe-form-item
          title="最后修改时间："
          field="updateTime"
          span="6"
          :item-render="{}"
        >
          <template #default>
            <el-date-picker
              v-model="formSearch.updateTime"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </template>
        </vxe-form-item>
        <vxe-form-item span="6" align="right">
          <template #default>
            <el-button native-type="submit" type="primary">搜索</el-button>
            <el-button native-type="reset">重置</el-button>
          </template>
        </vxe-form-item>
      </vxe-form>
    </template>
    <template #default>
      <vxe-grid
        ref="xGrid"
        border
        stripe
        keep-source
        auto-resize
        sync-resize
        :loading="listLoading"
        :column-config="{ resizable: true }"
        :export-config="{}"
        :columns="tableColumn"
        align="left"
        show-overflow="tooltip"
        :row-config="{ keyField: 'id', isCurrent: true, isHover: true }"
      >
        <template #form>
          <div class="custom-divider"></div>
        </template>
        <template #options="{ row }">
          <!-- <el-button type="primary" link @click="handleDetails(row)">
            详情
          </el-button> -->
          <el-button type="primary" link @click="handleEdit(row)">
            编辑
          </el-button>
        </template>
        <template #bottom>
          <el-pagination
            background
            :current-page="formSearch.pageNo"
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="formSearch.pageSize"
            :total="formSearch.total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </template>
      </vxe-grid>
    </template>
  </layoutPage>
</template>

<script lang="ts" setup>
  import layoutPage from '@/components/layoutPage.vue'
  import {
    formSearchProps,
    pagingProps,
    draftBoxProps,
    resProps,
  } from './interface'
  import { getDraftBoxPage } from '@/api/project/drafts'
  import { useDictStore } from '@/store/modules/dict'

  const _discStore = useDictStore()

  const tableColumn = [
    { title: '草稿ID', field: 'id', with: 80 },
    {
      title: '类型',
      field: 'type',
      minWidth: 180,
      formatter: ({ cellValue }) => {
        return _discStore.getDictLabelForValue(
          'drafts_business_type',
          cellValue
        )
      },
    },
    {
      title: '创建时间',
      field: 'createTime',
      minWidth: 120,
      formatter: ['formatDate', 'yyyy-MM-dd HH:mm:ss'],
    },
    {
      title: '最后修改时间',
      field: 'updateTime',
      minWidth: 120,
      formatter: ['formatDate', 'yyyy-MM-dd HH:mm:ss'],
    },
    {
      title: '操作',
      field: 'options',
      minWidth: 80,
      slots: { default: 'options' },
    },
  ]

  // 表格实例
  const xGrid = ref(null)
  // 加载状态
  const listLoading = ref<boolean>(false)
  // 查询表单
  const formSearch = reactive<formSearchProps & pagingProps>({
    pageNo: 1,
    pageSize: 10,
    total: 0,
  })

  // 搜索
  const handleSearch = async () => {
    try {
      listLoading.value = true
      const res: resProps = await getDraftBoxPage(formSearch)
      if (res && res.code === 0 && res.data) {
        xGrid.value.reloadData(res.data?.list || [])
        formSearch.total = res.data?.total
      } else {
        xGrid.value.reloadData([])
      }
    } catch (e) {
      console.error('获取草稿列表时出错:', e)
      xGrid.value.reloadData([])
    } finally {
      listLoading.value = false
    }
  }
  // 重置
  const handleReset = () => {
    formSearch.pageNo = 1
    formSearch.pageSize = 10
    formSearch.total = 0
    handleSearch()
  }

  // 分页大小变化
  const handleSizeChange = (val: number) => {
    formSearch.pageSize = val
    handleSearch()
  }

  // 当前页变化
  const handleCurrentChange = (val: number) => {
    formSearch.pageNo = val
    handleSearch()
  }

  // 组件挂载时执行
  onMounted(() => {
    handleSearch()
  })

  // 路由实例
  const router = useRouter()

  // 修改  都是动态路由名称 这里需要一个映射 将row  中的类型 同路由名称 绑定 然后跳转
  const handleEdit = (row: draftBoxProps) => {
    router.push({
      name: 'Drafts_Edit',
      query: { id: row.id, getType: 1 },
    })
  }
  // 处理详情点击
  // const handleDetails = (row: draftBoxProps) => {
  //   router.push({
  //     name: 'Drafts_Details',
  //     query: { id: row.id },
  //   })
  // }
</script>

<style lang="scss" scoped></style>
